<style type="text/css">
.quickTip { display:block; color:#fff; text-decoration:none; text-align:center; background-image: url('minibutton.png'); 
           width:20px; height:41px; font-size:14px;}
.quickTip span { line-height:37px;}
#quickTip { background-image:url('../images/greentip.png'); width:202px;height:82px; color:white; }
#quickTip p{ margin-left:17px;}
.hideTip { position: absolute; display: none; }
#container { margin:0 auto; width:800px; margin-top:100px;}
#spacer { width:100%; height:130px;}
</style>
<h1>Positions List</h1>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Employee</th>
            <th>Name</th>
            <th>Start date</th>
            <th>End date</th>        
            <th>Salario Mensual</th>
            <th>Shifts</th>
            <th>Payment periodicity</th>
            <th>Location</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($positions as $i => $position): ?>
            <tr class="<?php echo fmod($i, 2) ? 'even' : 'odd' ?> dataList">
                <td>
                     <?php $errors = $position->validate(); 
                     if(count($errors)>0){
                        $warningClass ='warning';
                        $alt = '';
                        $count = 1;
                        foreach ($errors as $key => $error) {
                            $alt .= $error;
                            if($count++ != count($errors)){
                                 $alt .= "|";
                            }                           
                        }
                     }else{
                        $warningClass ='';
                        $alt = '';
                     } ?>
                    <div class="<?php echo $warningClass?>" alt="<?php echo $alt ?>">
                    <a href="<?php echo url_for('position/show?id=' . $position->getId()) ?>"><?php echo $position->getId() ?></a>
                    </div>
                </td>
                <td><?php echo $position->getEmployee() ?></td>
                <td><?php echo $position->getName() ?></td>
                <td><?php echo $position->getStartDate() ?></td>
                <td><?php echo $position->getEndDate() ?></td>
                <td><?php echo "$ ". number_format($position->getMonthlySalary(),2) ?></td>
                <td>
                <?php foreach ($position->getShiftAssignment() as $sa): ?>
                    <div><?php echo $sa->getShift()->getName() ?></div>
                <?php endforeach; ?>
                </td>    
                <td><?php echo $position->getPaymentPeriodicity() ?></td>
                <td><?php echo $position->getPositionLocation() ?></td>
                <td>
                    <a href="<?php echo url_for('position/clone?id=' . $position->getId()) ?>">Clone</a>
                    <a href="<?php echo url_for('position/edit?id=' . $position->getId()) ?>">Edit</a>
                </td>

            </tr>
        <?php endforeach; ?>
                </tbody>
            </table>

            <a href="<?php echo url_for('position/new') ?>" class="addRecord">New</a>
<script type="text/javascript">
    $('.quickTip').hover(function(){
        $('body').append('<div id="quickTip"><p>' + $(this).attr('alt') + '</p></div>');
        var pos = $(this).offset();
        var width = $(this).width();
        var leftPos = pos.left + width -20;
        $('#quickTip').addClass('hideTip');
        $('#quickTip').css({"left": (leftPos) + "px", "top" : (pos.top -80) + "px"});
        $('#quickTip').fadeIn('slow');
    }, function(){
        $('#quickTip').remove();
    });
</script>
